<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title></title>
    <script src="js/mui.min.js"></script>
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="font_ico/iconfont.css">
	<link rel="stylesheet" href="css/icons-extra.css">
    <link rel="stylesheet" href="css/header.css">
	<link rel="stylesheet" href="css/app.css">
    <script type="text/javascript" charset="utf-8">
      	mui.init();
      	// 移动设备就绪完成后
      	mui.plusReady(function(){
      		plus.navigator.setStatusBarStyle("light");
      		plus.navigator.setStatusBarBackground("#303030");
      	});
    </script>
</head>
<body class="mui-android mui-android-5 mui-android-5-0">
	<!-- 底部菜单 -->
	<nav class="mui-bar mui-bar-tab">
	    <a class="mui-tab-item" tabindex="0">
	        <span class="mui-icon mui-icon-chatbubble"></span>
	        <span class="mui-tab-label">消息</span>
	    </a>
	    <a class="mui-tab-item" tabindex="1">
	        <span class="mui-icon mui-icon-extra mui-icon-extra-peoples"></span>
	        <span class="mui-tab-label">客户列表</span>
	    </a>
	    <a class="mui-tab-item" tabindex="2">
	        <span class="mui-icon mui-icon-extra mui-icon-extra-find"></span>
	        <span class="mui-tab-label">往期记录</span>
	    </a>
	    <a class="mui-tab-item mui-active" tabindex="3">
	        <span class="mui-icon mui-icon-contact"></span>
	        <span class="mui-tab-label">我的信息</span>
	    </a>
	</nav>
	
	
	<div class="mui-content">
		<!--用户信息-->
		<div class="box box-middlecenter user_img">
			<div class="box-center radiusround img_box">
				<img src="img/photo1.png">
			</div>
			<div class="box-center user_name_box">
				<div class="user_name">我的信息</div>
				<div class="user_sname">姓名：王珍珍</div>
			</div>
		</div>
		<!--我的列表-->
		<div class="mui-card" style="margin-top: -60px;">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span class="mui-pull-left mui-icon-extra mui-icon-extra-order color-7 size40"></span>
						<div class="mui-media-body justify-content"><b>我的订单</b></div>
						<span class="mui-badge mui-badge-success">查看全部订单</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a>
						<span class="mui-pull-left mui-icon-extra mui-icon-extra-gold color-4 size40"></span>
						<div class="mui-media-body justify-content">
							<div class="size16">贷款金额：<span class="color-9 size24">3000.00</span>元</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-media-body">
						<span class="mui-badge bgcolor-9 color-white" style="padding:5px 10px;">还款时间:2020年5月10日</span>
					</div>
				</li>
			</ul>
		</div>
		
		
		<div class="mui-card">
			<ul class="mui-table-view">
				<!--身份证认证-->
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span class="mui-pull-left mui-icon-extra mui-icon-extra-card color-8 size40"></span>
						<div class="mui-media-body justify-content"><b>身份证认证</b></div>
						<span class="mui-badge bgcolor-2 color-white">未认证</span>
					</a>
				</li>
				<!--运营商认证-->
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span class="mui-pull-left mui-icon-extra mui-icon-extra-hotel color-5 size40"></span>
						<div class="mui-media-body justify-content"><b>运营商认证</b></div>
						<span class="mui-badge bgcolor-7 color-white">已认证</span>
					</a>
				</li>
				<!--支付宝认证-->
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span class="mui-pull-left mui-icon-extra mui-icon-extra-alipay color-7 size40"></span>
						<div class="mui-media-body justify-content"><b>银行卡支付宝认证</b></div>
						<span class="mui-badge bgcolor-2 color-white">未认证</span>
					</a>
				</li>
				<!--手机认证-->
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span class="mui-pull-left mui-icon-extra mui-icon-extra-prech color-6 size40"></span>
						<div class="mui-media-body justify-content"><b>手机认证</b></div>
						<span class="mui-badge bgcolor-2 color-white">未认证</span>
					</a>
				</li>
				<!--帮助中心-->
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span class="mui-pull-left mui-icon-extra mui-icon-extra-custom color-9 size40"></span>
						<div class="mui-media-body justify-content"><b>帮助中心</b></div>
						<span class="mui-badge mui-badge-success">查看帮助</span>
					</a>
				</li>
			</ul>
		</div>
		
		<div class="mui-card">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" style="text-align: center;">
					<a>退出登录</a>
				</li>
			</ul>
		</div>

	
	<script src="js/mui.min.js"></script>
	<script type="text/javascript">
		var chatArray = [
			{
				pageId: "chat.html",
				pageUrl: "chat.html",
				pageTitle: "客户消息"
			},
			{
				pageId: "colist.html",
				pageUrl: "colist.html",
				pageTitle: ">客户列表"
			},
			{
				pageId: "lib.html",
				pageUrl: "lib.html",
				pageTitle: "往期记录"
			},
			{
				pageId: "my.html",
				pageUrl: "my.html",
				pageTitle: "我的信息"
			}
		];
		var pageStyle = {
			top: "44px",
			bottom: "50px"
		}
		function monitorNetWork(){
			document.addEventListener("netchange",function(){
				changeHeaderText()
			})
		}
		function changeHeaderText(){
			var connectionStatus = plus.networkinfo.getCurrentType();
			var header_title = document.getElementById("header_title");
			// 关闭网络链接
			if (connectionStatus == 0 || connectionStatus == 1) {
				chatArray[0].pageTitle = "消息(未连接)";
				if(header_title.innerHTML == "消息")	{	header_title.innerHTML = "消息(未连接)";}
			}else{
				chatArray[0].pageTitle = "消息";
				if(header_title.innerHTML == "消息(未连接)") {
					header_title.innerHTML =  "消息";
				}
			}
		}
		mui.plusReady(function(){
			// 重写mui back方法 使安卓手机的返回按钮对本页无效
			mui.back = function(){
				return false;
			}
			//首先更改一次标题
			changeHeaderText();
			// 网络链接监听
			monitorNetWork();
			// 获取当前的webview对象
			var indexWebView = plus.webview.currentWebview();
			// 向当前的主页 追加四张html webview
			for (var i=0;i<chatArray.length;i++) {
				var pageView= plus.webview.create(chatArray[i].pageUrl, chatArray[i].pageId, pageStyle);
				pageView.hide();
				// 追加子页面到当前主页面
				indexWebView.append(pageView);
			}
			plus.webview.show(chatArray[0].pageId);
			var header_title = document.getElementById("header_title");
			// 批量绑定tap 展示不同的webview
			mui(".mui-bar-tab").on('tap','a',function(){
				var tabindex = this.getAttribute("tabindex");
				plus.webview.show(chatArray[tabindex].pageId,"fade-in");
				header_title.innerHTML = chatArray[tabindex].pageTitle;
//				for (var i=0;i<chatArray.length;i++) {
//					if(tabindex!=i){
//						plus.webview.hide(chatArray[i].pageId,"fade-out");
//					}
//				}
			})
		})
	</script>
</body>
</html>